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Formulaires 
Le HTML 1.0 était essentiellement "mono"-directionnel 
e informations fournies par le serveur (suite à une commande client) 


Utilisation professionnelle 

e nécessité de flux d'information bi-directionnels (client .serveur) 
e HTML 2.0 introduit les formulaires 

e permettent aux clients de saisir des informations 

e qui seront envoyées aux serveurs 


Un formulaire est défini en HTML et peut contenir 
- Zones de saisie de texte 

- boîtes à cocher 

- boutons radio 

- menus déroulants 

- boutons 
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Exemple de formulaire HTML 


<HTML> <BODY> 
<FORM ACTION="http://www.monserveur.com/cgi-bin/prog.exe" METHOD=POST> 
Nom <INPUT NAME="client" SIZE-=46><P> 

Rue <INPUT NAME="rue" SIZE=40><P> 

Ville <INPUT NAME="ville" SIZE=20> 

Code postal <INPUT NAME="cp" SIZE=5><P> 

Carte de crédit No <INPUT NAME="carte" SIZE=10> 

Expire <INPUT NAME="expire" TYPE=TEXT SIZE=4><P> 

M/C <INPUT NAME="cc" TYPE=RADIO VALUE="mc" CHECKED> 
VISA <INPUT NAME="cc" TYPE=RADIO VALUE="vis"><P> 

Contre remboursement <INPUT NAME="cr" TYPE=CHECKBOX><P> 
<INPUT TYPE=SUBMIT VALUE="Envoi"> 

<INPUT TYPE=RESET VALUE-="Remise à zéro'"><P> 

</FORM> </BODY> </HTML> 


Ville | Code postal 
Carte de crédit No | Ezpire 
MC © VISA C 


Contre remboursement I 


Envoi | Remise à zéro | 
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Balises <FORM> </FORM> 
Déclaration d'un formulaire 
Attributs principaux ( <FORM ACTION=.. METHOD=.. NAME=.. >) 


ACTION URL vers laquelle envoyer les données saisies 

METHOD commande HTTP à utiliser pour effectuer l'envoi ! POST ou GET 
NAME nom du formulaire 

TARGET nom de la frame dans laquelle le résultat doit être affiché 


e toutes les balises HTML sont permises entre <FORM> </FORM> 
d’où images, tableaux, … peuvent être inclus dans un formulaire 


e des formulaires peuvent être insérés à l'intérieur d'un autre formulaire (attention P 
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Balise <INPUT> 


Déclaration des champs de saisie (exclusivement entre <rorm> </FORM>) 


NAME nom du champ de saisie (unique à l'intérieur d'un formulaire) 
TYPE type du champ de saisie 


Types possibles (ryPE=...) 

TEXT zone de saisie texte (type par défaut en cas d'omission de TYPE) 
s1ZE : taille de la zone 

RADIO bouton radio 
tous les boutons ayant même nom (NAME) appartiennent au même groupe 
dans ce cas, les attributs (VALUE) permettent de les différencier 

CHECKBOX boîte à cocher 


SUBMIT bouton d'envoi des données au serveur 
RESET bouton d'effacement des champs du formulaire 
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Envoi des données au serveur 

Lorsque l'utilisateur appuie sur le bouton suBuir, le navigateur 

e construit une chaîne de caractères contenant toutes les données du formulaire 
e envoie cette chaîne au serveur 


Chaîne 

e ensemble de couples séparées par le caractère & 

e chaque couple est de la forme nom de champ = valeur saisie 
e les espaces sont remplacés par le caractère + 

e les caractères + & = sont encodés %2B %26 %3D 
Exemple (1 seule ligne) 


client-J+Cartierérue=25+rte+de+Pariséville=Parisacp=7/50018carte=01234567&cc=visécr=on 


Cette chaine peut-être visible dans la barre d'adresse (méthode GET) 
ou invisible (méthode POST. 


Remarque : pour les boîtes à cocher —=valeur associée si cochée, rien sinon 
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Autres types possibles pour la balise <INPUT> 
PASSWORD zone de saisie d'un mot de passe + attribut ENCTYPE 


FILE sélection d'un fichier à envoyer 


<HTML> <BODY> 
<FORM ACTION="http://www.monserveur.com/cgi-bin/prog.exe" METHOD=POST 
ENCTYPE="multipart/form-data"> 

Mot de passe <INPUT TYPE=PASSWORD NAME="passe" SIZE=16> <P> 
Sélectionner un fichier <INPUT TYPE=FILE NAME="fichier"> <P> 

<INPUT TYPE=SUBMIT VALUE="Envoi"> 

<INPUT TYPE=RESET VALUE="Remise à zéro"> <P> 
</FORM> 

</BODY> </HTML> 


2 F:\Cours HTML', 14.html - Internet Explorer o A 
Fichier Edition Affichage Favoris Outils 2 | Ei 


J Précédente v ©) ~ [x] [2] | A Rechercher e Favoris » 
TOR E 
PASSWORD les caractères saisis sont remplacés par des * | ie de passe 
FILE provoque l'affichage Sélciomern äiti N 
- d'un champ de saisie du nom du fichier y men 
- d'un bouton Parcourir pour sélectionner le fichier P 


[Æ] Terminé [p  [ [H Poste de travail 7 


via une fenêtre de parcours du disque 
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Autres types possibles pour la balise <INPUT> 


À F:\Cours HTML\14.htmil - Internet Explorer 
Fichier Edition Affichage Favoris Outils 2 | æ 
O Précédente + © ~ bÀ [2] | A Rechercher © Favoris * 


Adresse [Æ] F:\Cours HTML} 14.html J] gx 


Mot de passe |ee..e 
Sélectionner un fichier [C\Documents and Setti … Parcourir.. 


Remise à zéro 1 
Essen 
Regarder dans : [C3 maker | + Ec* Er 


Ea Terminé a || [4 Poste de trav 


Mes documents 


récents 
Bureau Game_Maker.ent 
Game_Maker.exe 
NAS "| Game_Maker.GID 
@)Game_Maker.hp 
Mes documents License.txt 
=n E) Readme.txt 
] ES rundata 


Poste de travail 
æ 


+ 


EE Mom du fichier: 
Fichiers de type : Tous les fichiers (**] z] Annuler | 
PA 


Internet statique et dynamique 
Les formulaires 


Autres types possibles pour la balise <INPUT> 


HIDDEN champ caché (ne provoque aucun affichage) 


BUTTON un bouton simple d ’où association avec un traitement JavaScript 


<HTML> <BODY> 
<FORM ACTION="http://www.monserveur.com/cgi-bin/prog.exe" METHOD=POST> 
Champ caché <INPUT TYPE=HIDDEN NAME="cache" VALUE="Jean"> <P> 

<INPUT TYPE=BUTTON VALUE="Cliquez" onClick="fonctionJavaScript()"> 
<INPUT TYPE=SUBMIT VALUE="Envoi"> 

<INPUT TYPESRESET 

VALUE="Remise à zéro"> <P> 

</FORM> 

</BODY> </HTML> 


À F: Cours HTML’, 15.html - Internet Explorer aa |=] Ed] 
Fichier Edition Affichage Favoris Outils ? A Ed 
(9 rrécédente v E9 r |x] 2) A pe Rechercher > 


Adresse B F:\Cours HTML\15.html "| ED x 


Champ caché 


Cliquez | Envoi | Remise à zéro | 


f2 
[Æ] Terminé = = = pl Poste de travail Á 
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Autres types possibles pour la balise <INPUT> 
Champ HIDDEN 


d’où transmission d'informations "furtives" dans une chaîne de formulaires 


À C:\Documents and Settings\jfk\Bureau\e#s jol xi 


Fichier Edition Affichage Favoris Outils >? A 


Q Précédente + ©) - x) a | 


Adresse B au\Cours HTML\17.html F OK 


Votre nom : [Cartier 


Votre prénom : [Jean 


À C:\Documents and Settings jfk Bureau 


loi xi 
Fichier Edition Affichage Favoris Outils #| Ay 
J Précédente » E9 v |x A » 
Remise à zéro | Q Ə- a a] 


Adresse [e C:\Documents and Settir x] OK | Liens ? 


Votre commande : 


Fa 
Ey] Temini | [ [| | F] Poste de travail Z 


Numéro de l'article : [12547 
Fig 1-10 : Page de renseignements Quantité : [A 
Remise à zéro | 
x“ 
&] Terminé | jae a 4 Poste de travail A 


Fig 1-10 : Page de commande 
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Autres types possibles pour la balise <INPUT> 
Champ HIDDEN 


d’où transmission d'informations "furtives" dans une chaîne de formulaires 


E] C:\Documents and Settings\jfk\Bureau)\ Cours HIMES iol xj 
Fichier Edition Affichage Favoris Outils 2 | & 

CD Précédente + © + [x] (2) #0 | AA Rechercher + 
Adresse [Æ] nostifkiBureauicours HrmL19.htmi +] EJ ok [Liens >| 


Jean, 


voici le récapitulatif de votre commande : 
- 3 articles 12547 


Confirmez vous la commande ? 


Je confirme | J'annule | 
E] Terminé | [| [| [H Poste de travail h 


- page 1 vers 2 insertion d'un champ caché dans le formulaire 2 (VALUE="]Jean") 
récupéré de la page 1 
- page 2 vers 3 récupération de caché pour générer formulaire 3 
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Autres balises possibles dans un formulaire 


TEXTAREA zone de saisie d'un texte sur plusieurs lignes 


sELECT définition d'un menu déroulant 
balise opr1oN pour définir les choix du menus 


<HTML> <BODY> 
<FORM ACTION="http://monserveur.com/cgi-bin/prog.exe" METHOD=POST> 
<TEXTAREA NAME="zone" ROWS=3 COLS=40>texte initial</TEXTAREA> <P> 
<SELECT NAME="musicTypes"> 


À C:\Documents and Settings\jfk\Bureau\Cours HIMD =] E] 


<OPTION> R&B Fichier Edition Affichage Favoris Outils 2 z | æ 
Q Précédente ~- Q) r | x Ph | J Recher i iai 

<OPTION> Jazz SE A N eerten ea 
adresse [E] Documents and sattnastfiteureaicz] EJ oK [Liens ? 


<OPTION> Blues 
<OPTION> New Age Panas 
</SELECT> <P> 

<INPUT TYPE=SUBMIT VALUE="Envoi"> 
</FORM> </BODY> </HTML> 


À C:\Documents and Settings\jfk\Bureau\ Cours HIMOLZ 
Fichier Edition Affichage Favoris Outils 2 & 


C9 précédente > © v [x] [2] | A Rechercher <te Favoris > 


Adresse lE) C:\Documents and Settings\jfk\Bureau\C >| OK | Liens ? 


texte initial 


| «à Poste de travail 


| Poste de travail 
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Autres balises possibles dans un formulaire 


SELECT MULTIPLE définition d'un menu déroulant à choix multiples 


<HTML> <B 


ODY> 


<FORM ACTION="http://monserveur.com/cgi-bin/prog.exe" METHOD=POST> 
<SELECT MULTIPLE NAME="musicTypes"> 


<OPTION> 
<OPTION> 
<OPTION> 
<OPTION> 
</SELECT> 
<INPUT TY 
</FORM> < 


R&B 
Jazz 

Blues 

New Age 

<P> 

PE=SUBMIT VALUE="Envoi"> 
/BODY> </HTML> 


Sélection multiple par Ctrl+clic 
ou par Shift +Clic 


E] C:\Documents and Settings\jfk\Bureau)\ Cours HIMEN 


Fichier Edition Affichage Favoris Outils 


C) rrécédente v K9 r |x] iz] A | J Rechercher 


Adresse [Æ] ingstjfkiBureau\Cours HTMLY21 html +] EJ ok 


[Æ] Terminé | [ [ [4 Poste de travai L 
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Et après ? 

Que fait-on des données communiquées par l'utilisateur ? 
Comment enregistre-t-on ces données ? 

Comment les traitons-nous ? 


Bref, que se passe-t-il ensuite ... ? 


Tout cette partie est gérée par le serveur 
et nous l'aborderons dans le chapitre sur la programmation côté serveur. 


